<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>建议使用学习帮APP</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        body{
            background: #F6F6F6;
            display: flex;
            flex-direction: column;
            font-family: 微软雅黑;
            font-size: .3865rem;
            letter-spacing: .0169rem;
            overflow: hidden;/*禁止上下滑动*/
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
            overflow: hidden;
            
        }
        ul li{
            list-style: none;
        }
        a{
            text-decoration: none;
            
        }
        section{
            flex: 1;
            background-color: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: hidden;
        }
    </style>
    <link rel="stylesheet" href="./css/section.css">
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./css/container.css">
    <link rel="stylesheet" href="../../css/footer.css">
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css" referrerpolicy="no-referrer"/>

    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script> -->
    
    <script src="../../lib/vue.js"></script>
    <script src="../../lib/axios.js"></script>
    <script>
        
    </script>





</head>
<body>
    <section>
        <header>
            <div class="logo"></div>
            <div class="right">
                <template v-if="isSearchBoxShow">
                    <div class="tem">
                        <div class="back" @click="SwitchSearchButton()"></div>
                        <input type="text" name="txt" @input="checkEnter()" v-model="searchValue" placeholder="用户、话题、动态..." autofocus id="input">
                        <span @click="search()">搜索</span>
                    </div>
                </template>
                <template v-if="!isSearchBoxShow">
                    <div class="tem">
                        <div class="search" @click="SwitchSearchButton()"></div>
                        <div class="notify"></div>
                        <a href="" class="userImg"><img :src="userImg" alt=""></a>
                    </div>
                    
                </template>
                
            </div>
        </header>
        <van-tabs v-model="active" animated color="#2493f1" title-active-color="#2493f1" @click="onClick">
            <!-- 广场 -->
            <van-tab name=0 title="广场">
              <div class="padding20X paddingX14 van-bgcolor-white">
                    <div class="container container0" id=""  @scroll="handleScroll(toBottom)">
                        <van-pull-refresh v-model="isLoading" @refresh="onRefresh" success-text="刷新成功">
                            
                                <ul class="articleList guangchang all" id="articleList" >
                                    <li v-for="(item, index) of allArticleList" :key="index" :index="index" :style="(item.type === '2') ? {'background-image': 'url(./img/bg2.webp)','border':'.1208rem solid #ffe873','border-radius': '.7246rem 0 .6039rem 0','padding':'.0483rem','box-sizing': 'border-box','box-shadow':'.1208rem .1208rem .0725rem #b2b2b259'} : {background: '#fff','border-radius':'.1208rem'}">
                                    <!-- 图文动态 -->
                                        <div class="top">
                                            <div class="left" v-show="item.type !== '2'">
                                                <div class="userImg">
                                                    <img :src="(item.author.userImg !== '') ? item.author.userImg : '../../images/person/person_senter/defaultUserImg.webp'" alt="">
                                                </div>
                                                <div class="info">
                                                    <span class="name">{{(item.author.name === "") ? '无名用户' : item.author.name}}</span>
                                                    <span class="dept" v-show="item.type !== '3'" :style="(item.author.realInfo !== undefined && item.author.realInfo.院校==='官方') ? {background: '#2493f1', color: '#fff', padding:'0 .1691rem', 'font-weight': '600', 'border-radius': '.2415rem'}:{}">{{(item.author.realInfo === undefined) ? '未认证' : item.author.realInfo.院校}}</span>
                                                </div>
                                            </div>
                                            <!-- 提问 -->
                                            <div class="left question" v-show="item.type === '2'">
                                                <div class="userImg">
                                                    <img :src="(item.author.userImg !== '') ? item.author.userImg : '../../images/person/person_senter/defaultUserImg.webp'" alt="">
                                                </div>
                                                <div class="info">
                                                    <span class="name">提问</span>
                                                </div>
                                            </div>
                                            <!-- 过滤器处理时间 -->
                                            <div class="right" v-show="item.type !== '3'" @click="read(index, item._id, item.type)">
                                                {{item.article.time | handleTime}}<br>
                                                {{(item.type !== '2') ? item.ipAddress_province : ''}}
                                            </div>
                                            <div class="right"  v-show="item.type === '3'" @click="read(index, item._id, item.type)">
                                                {{item.article.time | handleTime}}
                                            </div>
                                        </div>

                                        <div :class="item.type === '3' ? 'body wz_body' : 'body'" @click="read(index, item._id, item.type)">
                                            <div class="txt" v-show="(item.type !== '2')">{{(item.type == '3') ? item.article.title : item.article.body}}</div>
                                            <!-- 提问 -->
                                            <div class="txt_question" v-show="item.type === '2'">{{(item.type === '2') ? item.article.title : item.article.body}}</div>
                                            <div class="imgList" v-show="(item.article.images.length !== 0) && (item.type != '2')">
                                                <!-- <img :src="item.article.images[0]" alt="" @click.stop="imagePreview($event)"> -->
                                                <img :src="item.article.images[0]" alt="" @click.stop="imagePreview(item.article.images)">
                                                <div class="n" v-show="(item.article.images.length === 1 || item.type === '3') ? false : true">共{{item.article.images.length}}张</div>
                                            </div>
                                            <div class="other" v-show="((('address' in item) === true && item.address !== '') || item.topic.length > 0) && (item.type != '2' && item.type != '3')">
                                                <div class="topic">
                                                    <a v-for="val in item.topic" href="#" @click.stop="searchTopic(val)"><strong>#{{val}}</strong>&nbsp;</a>
                                                </div>
                                                <div class="position" v-show="('address' in item) === true && item.address !== ''" @click.stop="searchTopic(item.address)">
                                                    <div class="dwIcon"></div>
                                                    <span>{{item.address}}</span>
                                                </div>

                                            </div>
                                        </div>

                                        <div class="bottom" v-show="item.type !== '3'" @click="read(index, item._id, item.type)">
                                            <!-- 回答 -->
                                            <span class="answer" v-show="item.type === '2'">
                                                {{item.comments}}&nbsp;回答
                                            </span>
                                            <div class="comments" @click.stop="read(index, item._id, item.type)" v-show="item.type !== '2'">
                                                <div class="icon"></div>
                                                <span class="commentsNum">{{item.comments}}</span>
                                            </div>
                                            <!-- 回答Icon -->
                                            <div class="answerIcon" @click.stop="read(index, item._id, item.type)" v-show="item.type === '2'">
                                                <div class="icon"></div>
                                                <span>写回答</span>
                                            </div>
                                            <div class="likes" @click.stop="like(index, item._id)" v-show="item.type != '2'">
                                                <!-- background: url(./img/likes-active.webp) no-repeat -->
                                                <div class="icon" :style="item.isLike ? {backgroundImage: 'url(./img/likes-active.webp)'} : {backgroundImage: 'url(./img/likes.webp)'}"></div>
                                                <!-- <div class="icon" :style="{backgroundImage: item._id}"></div> -->
                                                <span class="likesNum">{{item.likes}}</span>
                                            </div>
                                            <div class="jb" @click="report(index, item._id, item.type)" v-show="item.type !== '2'"></div>
                                        </div>
                                    </li>

                                    
                                    
                                
                                    
                                </ul>
                        </van-pull-refresh>
                        
                        
                        
                    
                    
                    
                        <div class="post" @click="showPopup"></div>
                    </div>

                        
                </div>

                
            </van-tab>

            <!-- 动态 -->
            <van-tab name=1 title="动态">
                <div class="padding20X paddingX14 van-bgcolor-white">
                    <div class="container container1" id=""  @scroll="handleScroll(toBottom)">
                        <van-pull-refresh v-model="isLoading" @refresh="onRefresh" success-text="刷新成功">
                            
                                <ul class="articleList guangchang twdt" id="articleList" >
                                    <li v-for="(item, index) of allArticleList" :key="index" :index="index" :style="(item.type === '2') ? {'background-image': 'url(./img/bg2.webp)','border':'.1208rem solid #ffe873','border-radius': '.7246rem 0 .6039rem 0','padding':'.0483rem','box-sizing': 'border-box','box-shadow':'.1208rem .1208rem .0725rem #b2b2b259'} : {background: '#fff','border-radius':'.1208rem'}">
                                    <!-- 图文动态 -->
                                        <div class="top">
                                            <div class="left" v-show="item.type !== '2'">
                                                <div class="userImg">
                                                    <img :src="(item.author.userImg !== '') ? item.author.userImg : '../../images/person/person_senter/defaultUserImg.webp'" alt="">
                                                </div>
                                                <div class="info">
                                                    <span class="name">{{(item.author.name === "") ? '无名用户' : item.author.name}}</span>
                                                    <span class="dept" :style="(item.author.realInfo !== undefined && item.author.realInfo.院校==='官方') ? {background: '#2493f1', color: '#fff', padding:'0 .1691rem', 'font-weight': '600', 'border-radius': '.2415rem'}:{}">{{(item.author.realInfo === undefined) ? '未认证' : item.author.realInfo.院校}}</span>
                                                </div>
                                            </div>
                                            <!-- 提问 -->
                                            <div class="left question" v-show="item.type === '2'">
                                                <div class="userImg">
                                                    <img :src="(item.author.userImg !== '') ? item.author.userImg : '../../images/person/person_senter/defaultUserImg.webp'" alt="">
                                                </div>
                                                <div class="info">
                                                    <span class="name">提问</span>
                                                </div>
                                            </div>
                                            <!-- 过滤器处理时间 -->
                                            <div class="right" @click="read(index, item._id, item.type)">
                                                {{item.article.time | handleTime}}<br>
                                                {{(item.type !== '2') ? item.ipAddress_province : ''}}</div>
                                        </div>

                                        <div class="body" @click="read(index, item._id, item.type)">
                                            <div class="txt" v-show="item.type !== '2'">{{(item.type === '2') ? item.article.title : item.article.body}}</div>
                                            <!-- 提问 -->
                                            <div class="txt_question" v-show="item.type === '2'">{{(item.type === '2') ? item.article.title : item.article.body}}</div>
                                            <div class="imgList" v-show="(item.article.images.length !== 0) && (item.type != '2')">
                                                <!-- <img :src="item.article.images[0]" alt="" @click.stop="imagePreview($event)"> -->
                                                <img :src="item.article.images[0]" alt="" @click.stop="imagePreview(item.article.images)">
                                                <div class="n" v-show="item.article.images.length === 1 ? false : true">共{{item.article.images.length}}张</div>
                                            </div>
                                            <div class="other" v-show="((('address' in item) === true && item.address !== '') || item.topic.length > 0) && (item.type != '2')">
                                                <div class="topic">
                                                    <a v-for="val in item.topic" href="#" @click.stop="searchTopic(val)"><strong>#{{val}}</strong>&nbsp;</a>
                                                </div>
                                                <div class="position" v-show="('address' in item) === true && item.address !== ''">
                                                    <div class="dwIcon"></div>
                                                    <span>{{item.address}}</span>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="bottom" @click="read(index, item._id, item.type)">
                                            <!-- 回答 -->
                                            <span class="answer" v-show="item.type === '2'">
                                                {{item.comments}}&nbsp;回答
                                            </span>
                                            <div class="comments" @click.stop="read(index, item._id, item.type)" v-show="item.type !== '2'">
                                                <div class="icon"></div>
                                                <span class="commentsNum">{{item.comments}}</span>
                                            </div>
                                            <!-- 回答Icon -->
                                            <div class="answerIcon" @click.stop="read(index, item._id, item.type)" v-show="item.type === '2'">
                                                <div class="icon"></div>
                                                <span>写回答</span>
                                            </div>
                                            <div class="likes" @click.stop="like(index, item._id)" v-show="item.type != '2'">
                                                <!-- background: url(./img/likes-active.webp) no-repeat -->
                                                <div class="icon" :style="item.isLike ? {backgroundImage: 'url(./img/likes-active.webp)'} : {backgroundImage: 'url(./img/likes.webp)'}"></div>
                                                <!-- <div class="icon" :style="{backgroundImage: item._id}"></div> -->
                                                <span class="likesNum">{{item.likes}}</span>
                                            </div>
                                            <div class="jb" @click="report(index, item._id, item.type)" v-show="item.type !== '2'"></div>
                                        </div>
                                    </li>

                                    
                                    
                                
                                    
                                </ul>
                        </van-pull-refresh>
                        
                        
                        
                    
                    
                    
                        <div class="post" @click="showPopup"></div>
                    </div>

                        
                </div>
            </van-tab>
            <!-- 问答 -->
            <van-tab name=2 title="问答">
                <div class="padding20X paddingX14 van-bgcolor-white">
                    <div class="container container2" id=""  @scroll="handleScroll(toBottom)">
                        <van-pull-refresh v-model="isLoading" @refresh="onRefresh" success-text="刷新成功">
                            
                                <ul class="articleList guangchang tw" id="articleList" >
                                    <li v-for="(item, index) of allArticleList" :key="index" :index="index" :style="(item.type === '2') ? {'background-image': 'url(./img/bg2.webp)','border':'.1208rem solid #ffe873','border-radius': '.7246rem 0 .6039rem 0','padding':'.0483rem','box-sizing': 'border-box','box-shadow':'.1208rem .1208rem .0725rem #b2b2b259'} : {background: '#fff','border-radius':'.1208rem'}">
                                    <!-- 图文动态 -->
                                        <div class="top">
                                            <div class="left" v-show="item.type !== '2'">
                                                <div class="userImg">
                                                    <img :src="(item.author.userImg !== '') ? item.author.userImg : '../../images/person/person_senter/defaultUserImg.webp'" alt="">
                                                </div>
                                                <div class="info">
                                                    <span class="name">{{(item.author.name === "") ? '无名用户' : item.author.name}}</span>
                                                    <span class="dept" :style="(item.author.realInfo !== undefined && item.author.realInfo.院校==='官方') ? {background: '#2493f1', color: '#fff', padding:'0 .1691rem', 'font-weight': '600', 'border-radius': '.2415rem'}:{}">{{(item.author.realInfo === undefined) ? '未认证' : item.author.realInfo.院校}}</span>
                                                </div>
                                            </div>
                                            <!-- 提问 -->
                                            <div class="left question" v-show="item.type === '2'">
                                                <div class="userImg">
                                                    <img :src="(item.author.userImg !== '') ? item.author.userImg : '../../images/person/person_senter/defaultUserImg.webp'" alt="">
                                                </div>
                                                <div class="info">
                                                    <span class="name">提问</span>
                                                </div>
                                            </div>
                                            <!-- 过滤器处理时间 -->
                                            <div class="right" @click="read(index, item._id, item.type)">
                                                {{item.article.time | handleTime}}<br>
                                                {{(item.type !== '2') ? item.ipAddress_province : ''}}</div>
                                        </div>

                                        <div class="body" @click="read(index, item._id, item.type)">
                                            <div class="txt" v-show="item.type !== '2'">{{(item.type === '2') ? item.article.title : item.article.body}}</div>
                                            <!-- 提问 -->
                                            <div class="txt_question" v-show="item.type === '2'">{{(item.type === '2') ? item.article.title : item.article.body}}</div>
                                            <div class="imgList" v-show="(item.article.images.length !== 0) && (item.type != '2')">
                                                <!-- <img :src="item.article.images[0]" alt="" @click.stop="imagePreview($event)"> -->
                                                <img :src="item.article.images[0]" alt="" @click.stop="imagePreview(item.article.images)">
                                                <div class="n" v-show="item.article.images.length === 1 ? false : true">共{{item.article.images.length}}张</div>
                                            </div>
                                            <div class="other" v-show="(('address' in item) === true && item.address !== '') && (item.type != '2')">
                                                <div class="position">
                                                    <div class="dwIcon"></div>
                                                    <span>{{item.address}}</span>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="bottom" @click="read(index, item._id, item.type)">
                                            <!-- 回答 -->
                                            <span class="answer" v-show="item.type === '2'">
                                                {{item.comments}}&nbsp;回答
                                            </span>
                                            <div class="comments" @click.stop="read(index, item._id, item.type)" v-show="item.type !== '2'">
                                                <div class="icon"></div>
                                                <span class="commentsNum">{{item.comments}}</span>
                                            </div>
                                            <!-- 回答Icon -->
                                            <div class="answerIcon" @click.stop="read(index, item._id, item.type)" v-show="item.type === '2'">
                                                <div class="icon"></div>
                                                <span>写回答</span>
                                            </div>
                                            <div class="likes" @click.stop="like(index, item._id)" v-show="item.type != '2'">
                                                <!-- background: url(./img/likes-active.webp) no-repeat -->
                                                <div class="icon" :style="item.isLike ? {backgroundImage: 'url(./img/likes-active.webp)'} : {backgroundImage: 'url(./img/likes.webp)'}"></div>
                                                <!-- <div class="icon" :style="{backgroundImage: item._id}"></div> -->
                                                <span class="likesNum">{{item.likes}}</span>
                                            </div>
                                            <div class="jb" @click="report(index, item._id, item.type)" v-show="item.type !== '2'"></div>
                                        </div>
                                    </li>

                                    
                                    
                                
                                    
                                </ul>
                        </van-pull-refresh>
                        
                        
                        
                    
                    
                    
                        <div class="post" @click="showPopup"></div>
                    </div>

                        
                </div>
            </van-tab>
            <!-- 文章 -->
            <van-tab name=3 title="文章">
                <div class="padding20X paddingX14 van-bgcolor-white">
                    <div class="container container3" id=""  @scroll="handleScroll(toBottom)">
                        <van-pull-refresh v-model="isLoading" @refresh="onRefresh" success-text="刷新成功">
                            
                                <ul class="articleList guangchang wz" id="articleList" >
                                    <li v-for="(item, index) of allArticleList" :key="index" :index="index" :style="(item.type === '2') ? {'background-image': 'url(./img/bg2.webp)','border':'.1208rem solid #ffe873','border-radius': '.7246rem 0 .6039rem 0','padding':'.0483rem','box-sizing': 'border-box','box-shadow':'.1208rem .1208rem .0725rem #b2b2b259'} : {background: '#fff','border-radius':'.1208rem'}">
                                        <!-- 文章 -->
                                        <div class="top">
                                            <div class="left" v-show="item.type !== '2'">
                                                <div class="userImg">
                                                    <img :src="(item.author.userImg !== '') ? item.author.userImg : '../../images/person/person_senter/defaultUserImg.webp'" alt="">
                                                </div>
                                                <div class="info">
                                                    <span class="name">{{(item.author.name === "") ? '无名用户' : item.author.name}}</span>
                                                </div>
                                            </div>
                                            
                                            <!-- 过滤器处理时间 -->
                                            <div class="right" @click="read(index, item._id, item.type)">
                                                {{item.article.time | handleTime}}<br>
                                            </div>
                                        </div>


                                        <div class="body wz_body" @click="read(index, item._id, item.type)">
                                            <div class="txt">{{item.article.title}}</div>
                                            <!-- 提问 -->
                                            <div class="txt_question" v-show="item.type === '2'">{{(item.type === '2') ? item.article.title : item.article.body}}</div>
                                            <div class="imgList" v-show="(item.article.images.length !== 0) && (item.type != '2')">
                                                <!-- <img :src="item.article.images[0]" alt="" @click.stop="imagePreview($event)"> -->
                                                <img :src="item.article.images[0]" alt="" @click.stop="imagePreview(item.article.images)">
                                            </div>
                                        </div>
                                    </li>

                                    
                                    
                                
                                    
                                </ul>
                        </van-pull-refresh>
                        
                        
                        
                    
                    
                    
                        <div class="post" @click="showPopup"></div>
                    </div>

                        
                </div>
            </van-tab>
            <!-- 需求 -->
            <van-tab name=4 title="需求">
                需求
            </van-tab>
          </van-tabs>
        

        <!-- van-popup -->
        <!-- 挂在到body节点下 -->
        <van-popup round v-model="popupShow" position="bottom" get-container="body">
            <ul class="options">
                <li>
                    <div class="box" @click="handleSelect(1)">
                        <div class="icon fbdt"></div>
                        <span>发布动态</span>
                    </div>
                    <div class="box" @click="handleSelect(2)">
                        <div class="icon qtw"></div>
                        <span>去提问</span>
                    </div>
                </li>
                <li>
                    <div class="box" @click="handleSelect(3)">
                        <div class="icon xwz"></div>
                        <span>写文章</span>
                    </div>
                    <div class="box" @click="handleSelect(4)">
                        <div class="icon fbxq"></div>
                        <span>发布需求</span>
                    </div>
                </li>
            </ul>
        </van-popup>
        <!-- 图片预览组件 -->
        <van-image-preview v-model="show" :images="images" @change="onChange">
        </van-image-preview>  
    </section>
    <style>
        .container {
            width: 100%;
            overflow: scroll;
            position: relative;
        }
        .van-pull-refresh{
            width: 100%;
            flex: 1;
            background: #efefef;
            overflow: scroll;
            position: relative;
        }
        .van-pull-refresh__track{
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .ul{
            width: 100%;
            height: fit-content;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: scroll;
        }
        /*文章样式 body*/
        .wz_body{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        .wz_body .txt{
            font-weight: 550;
            width: 70%;
        }
        .wz_body .imgList{
            width: 2.4155rem;
            height: 1.9324rem;
            margin-bottom: .4831rem;
            margin-right: .2415rem;
        }
        .wz_body .imgList img {
            /* border: 1px solid red; */
            border-radius: .1449rem;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }
    </style>

    <footer>
        <!-- 首页 -->
        <a class="nav" href="../index/index.html">
            <div class="icon"></div>
            <span>首页</span>
        </a>
        <!-- 广场 -->
        <!-- <a class="nav active" href="#" onclick="event.preventDefault();upload()"> -->
        <a class="nav active" href="javascript:window.location='guangchang.html'">
            <div class="icon"></div>
            <span>广场</span>
        </a>
        <!-- 游戏 -->
        <a class="nav" href="../data/data.html">
            <div class="icon"></div>
            <span>帮友</span>
        </a>
        <!-- 我 -->
        <a class="nav" href="../person/person.html">
            <div class="icon"></div>
            <span>我</span>
        </a>


    </footer>

    <script>
        function upload(){
            vm.page = 1
            vm.allArticleList =[]
            vm.getLikesRecords()
        }
    </script>
    <!-- <script>
        let input = document.querySelector('.tem input');
            input.addEventListener('keyup', function(event) {
                if (event.keyCode === 13) {
                    vm.search()
                }
            });
    </script> -->
    <script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js" referrerpolicy="no-referrer"></script>
    <script src="./js/main.js"></script>
    
    
   
    <script>
        function resetHtmlFont(){
            document.documentElement.style.fontSize = screen.width/10 + 'px';
        }
        resetHtmlFont();
        window.onresize = resetHtmlFont;
    </script>
</body>
</html>